import React, { Component } from 'react';
import { Form, Input } from 'antd';
import { Tree } from 'antd';
import PropTypes from 'prop-types';
import menuList from '../../config/menuConfig.js';

// const treeData = [
//     {
//       title: 'parent 1',
//       key: '0-0',
//       children: [
//         {
//           title: 'parent 1-0',
//           key: '0-0-0',
//           children: [
//             {
//               title: 'leaf',
//               key: '0-0-0-0',
//             },
//             {
//               title: 'leaf',
//               key: '0-0-0-1',
//             },
//           ],
//         },
//         {
//           title: 'parent 1-1',
//           key: '0-0-1',
//           children: [
//             {
//               title: 'sss',
//               key: '0-0-1-0',
//             },
//           ],
//         },
//       ],
//     },
//   ];




/**
 * 品类保存表单
 */
class SaveForm extends Component {

    formRef = React.createRef();

    static propTypes = {
        type:  PropTypes.string.isRequired,
        role: PropTypes.object,
        setForm: PropTypes.func.isRequired,
    }


    state = {
        checkedKeys: []
    };
    
    // 只会在第一次渲染时走一遍
    constructor(props){
        super(props);

        const { menus } = this.props.role;
        // 初始化checkedKeys
        this.state = {
            checkedKeys: menus
        };
    }
    

    /**
     * 选中事件
     * @param {*} checkedKeys 
     * @param {*} info 
     */
    onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys, info);
        this.setState({ checkedKeys });
    };
    

    /**
     * 获取tree数据
     */
    getTreeDatas = (menuList) => {
        return [{
            title: '平台菜单',
            key: 'all',
            children: [...menuList]
        }]
    }

    /**
     * 获取新权限
     */
    getMenus = () => this.state.checkedKeys;


    UNSAFE_componentWillMount(){
       this.props.setForm(this.formRef);
       this.treeData = this.getTreeDatas(menuList);
    }


    componentDidUpdate() {
        this.formRef.current.setFieldsValue({
            name: this.props.role.name,
        });
    }


    // 根据新传入的role来更新checkedKeys状态
    /**
     * 当组件接收到新的属性时调用，在render之前
     * @param {*} nextProps 
     */
    UNSAFE_componentWillReceiveProps(nextProps){
        const menus = nextProps.role.menus;
        this.setState({checkedKeys:menus});
    }
    
    
    render() { 
        const { role }  = this.props;
        const { checkedKeys } = this.state;

        return (
            <Form ref={this.formRef} >
                <Form.Item 
                name="name" 
                label="角色名称"
                rules={[
                    { required: true, message: "角色名称不能为空" },
                ]}
                >
                    <Input placeholder='输入角色名称' disabled={role['_id']}/>
                </Form.Item>

                <Tree
                checkable
                defaultExpandAll
                checkedKeys={checkedKeys}
                onCheck={this.onCheck}
                treeData={this.treeData}
                />
            </Form>
        );
    }
}
 
export default SaveForm;